import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { DiffViewer } from '@/components/events/diff-viewer';
import { EventList } from '@/components/events/event-row';
import { SignificanceBadge } from '@/components/ui/badges';
import { KV, Row } from '@/components/ui/key-value';
import { Container, Note } from '@/components/ui/section';
import { api, ApiError } from '@/lib/api';
import { fmtDateTime, fmtInt, fmtPct } from '@/lib/format';
import { routes, SURFACE_LABELS } from '@/lib/site';

export const revalidate = 600;
export const metadata: Metadata = { title: 'Change', robots: { index: false } };

export default async function ChangePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  let ch;
  try {
    ch = await api.change(id);
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
  return (
    <Container>
      <div className="pb-4 pt-6 md:pt-10">
        <p className="eyebrow flex flex-wrap items-center gap-2">
          Change · {SURFACE_LABELS[ch.surface] ?? ch.surface}
          <SignificanceBadge value={ch.significance} />
        </p>
        <h1 className="display mt-2 text-[24px] md:text-[32px]">
          {ch.company ? (
            <Link href={routes.company(ch.company.slug)} className="hover:text-accent">
              {ch.company.display_name}
            </Link>
          ) : (
            'Monitored page'
          )}{' '}
          <span className="text-ink-3">·</span> {SURFACE_LABELS[ch.surface] ?? ch.surface} changed
        </h1>
        <p className="mt-2 text-sm text-ink-2">
          Detected {fmtDateTime(ch.detected_at)} · kind <span className="mono">{ch.kind}</span> · text delta {fmtPct(ch.text_delta_ratio, 1, true)}
          {ch.similarity !== null ? ` · similarity ${fmtPct(ch.similarity, 1, true)}` : ''}
        </p>
      </div>
      <div className="grid gap-8 lg:grid-cols-12">
        <div className="lg:col-span-8">
          <DiffViewer diff={ch.diff} significance={ch.significance} />
        </div>
        <aside className="space-y-6 lg:col-span-4">
          <KV>
            <Row k="Sensor">
              <Link href={routes.sensor(ch.sensor_id)} className="link mono text-xs break-all">
                {ch.sensor_id}
              </Link>
            </Row>
            <Row k="Before">
              {ch.snapshot_before ? (
                <Link href={routes.snapshot(ch.snapshot_before)} className="link mono text-xs break-all">
                  {ch.snapshot_before}
                </Link>
              ) : (
                <span className="text-ink-3">first observation</span>
              )}
            </Row>
            <Row k="After">
              <Link href={routes.snapshot(ch.snapshot_after)} className="link mono text-xs break-all">
                {ch.snapshot_after}
              </Link>
            </Row>
            {ch.snapshot_before && (
              <Row k="Full diff">
                <Link href={routes.snapshotDiff(ch.snapshot_before, ch.snapshot_after)} className="link text-xs">
                  Snapshot diff viewer →
                </Link>
              </Row>
            )}
            <Row k="Blocks">
              <span className="tnum">
                +{fmtInt(ch.blocks_added)} · −{fmtInt(ch.blocks_removed)} · ~{fmtInt(ch.blocks_modified)}
              </span>
            </Row>
          </KV>
          {Object.keys(ch.structured_delta ?? {}).length > 0 && (
            <div>
              <p className="eyebrow mb-1">Structured delta</p>
              <pre className="overflow-x-auto border border-rule bg-surface-2 p-3 text-xs">{JSON.stringify(ch.structured_delta, null, 2)}</pre>
            </div>
          )}
          <div>
            <p className="eyebrow mb-1">Events derived from this change</p>
            <EventList events={ch.events ?? []} variant="table" showCompany={false} emptyLabel="No structured event was derived from this change (below the significance threshold or awaiting processing)." />
          </div>
          <Note>Raw observations, normalised snapshots, diffs and events are stored separately; this diff can be recomputed from the two snapshots without re-fetching the page.</Note>
        </aside>
      </div>
    </Container>
  );
}